﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>人员分配</title>

<link href="css/css.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="js/jquery.min.js"></script>

</head>
<body>

<div class="box">
	<div style="margin-top: 10px;margin-left: 20px">
		<h3>队名:</h3>
		<textarea name="team_name" id="team_name" cols="80" rows="5" placeholder="队名间用英文“,”隔开"></textarea>
	</div>
    <div style="margin-top: 10px;margin-left: 20px">
        <h3>场次数量:</h3>
        <input type="text" name="group_num" id="group_num" style="width: 655px">
    </div>
    <div style="margin-top: 10px;margin-left: 20px">
        <h3>每场人数:</h3>
        <input type="text" name="user_num" id="user_num"  style="width: 655px">
    </div>
    <div class="submit" data-id="0">开 始</div>
	<!--<p class="Title">名单显示</p>-->
	<ul class="prizeList">
		
	</ul>
</div>

<script type="text/javascript">
	var groupNum; // 场次数量
	var userNum; // 每场的队伍数量
    var data; // 需要分组的队伍数组
    var interval;

    //从一个给定的数组arr中,随机返回num个不重复项
    function getArrayItems(arr, num, type) {
        //新建一个数组,将传入的数组复制过来,用于运算,而不要直接操作传入的数组;
        var temp_array = new Array();
        for (var index in arr) {
            temp_array.push(arr[index]);
        }
        //取出的数值项,保存在此数组
        var return_array = new Array();
        for (var i = 0; i<num; i++) {
            //判断如果数组还有可以取出的元素,以防下标越界
            if (temp_array.length>0) {
                //在数组中产生一个随机索引
                var arrIndex = Math.floor(Math.random()*temp_array.length);
                //将此随机索引的对应的数组元素值复制出来
                return_array[i] = temp_array[arrIndex];
                //然后删掉此索引的数组元素,这时候temp_array变为新的数组
                temp_array.splice(arrIndex, 1);
            } else {
                //数组中数据项取完后,退出循环,比如数组本来只有10项,但要求取出20项.
                break;
            }
        }
        if(type == 1){
            return return_array;
        }else{
            var res_array = new Array();
            res_array['choose'] = return_array;
            res_array['arrayLeft'] = temp_array;
            return res_array
        }
    }

	$(".submit").click(function(){
		var status = $(this).data("id");
		if(status == 0){
		    var team_name = $('#team_name').val();
            var group_num = $('#group_num').val();
            var user_num = $('#user_num').val();
            $.ajax({
                url:"http://boat.xuanwumobile.com/commi/Chouqian/cq",
                type:'post',
                dataType:'json',
                data:{'team_name':team_name,'group_num':group_num,'user_num':user_num},
                success:function(res1){
                    if(res1.code == 200){
                        data = res1.msg;
                        groupNum = res1.groupNum;
                        userNum = res1.userNum;
                        if(data){
                            function times(){
                                var ArrList=data;
                                var res = getArrayItems(ArrList,groupNum,1);
                                var str='';
                                for(var o in res){
                                    var num = parseInt(o)+1;
                                    str+='<li data-id="'+res[o].id+'">'+num+'、<span>'+res[o].name+'</span><label></label></li>';
                                }
                                $(".prizeList").html(str);
                            }
                            interval = setInterval(times,0);
                            $(".submit").data("id","1");
                            $(".submit").text("停止");
                        }else{
                            alert('Ajax error!');
                        }
                    }else {
                        alert(res1.msg);
                    }
                }
            });

		}else{
			clearInterval(interval);
			$(".submit").data("id","0");
			$(".submit").text("开始");
            var last_html = '';
			var arrays = data;
            for (var i = 0; i<groupNum; i++) {
                var result = getArrayItems(arrays,userNum,2);
                arrays = result['arrayLeft'];
                var res = result['choose'];
                last_html+='<li>';
                for(var o in res){
//                    var num = i+1;
                    last_html+= '<span>'+res[o].name+'</span><label></label>';
                    last_html+='<br/>';
                }
                last_html+='</li>';
            }
			$(".prizeList").html(last_html);
		}
	})
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>